iT邦幫忙

2023 iThome 鐵人賽

DAY 22
0
Modern Web

基礎網頁開發30天系列 第 22

Day 22 互動小遊戲-猜拳(js)

  • 分享至 

  • xImage
  •  
function playGame(userChoice) {
  const choices = ["rock", "paper", "scissors"];
  const computerChoice = choices[Math.floor(Math.random() * 3)];

  let resultText = "";

  if (userChoice === computerChoice) {
      resultText = "平局!";
  } else if (
      (userChoice === "rock" && computerChoice === "scissors") ||
      (userChoice === "paper" && computerChoice === "rock") ||
      (userChoice === "scissors" && computerChoice === "paper")
  ) {
      resultText = "你赢了!";
  } else {
      resultText = "電腦赢了!";
  }

  const resultElement = document.getElementById("result");
  resultElement.innerHTML = `你出了${userChoice},電腦出了${computerChoice},${resultText}`;
}
  1. function playGame(userChoice) {:這是一個JavaScript函數的開始,名稱為 "playGame",它接受一個參數 "userChoice",表示玩家的選擇。

  2. const choices = ["rock", "paper", "scissors"];:創建一個包含選擇(石頭、布、剪刀)的字符串陣列。

  3. const computerChoice = choices[Math.floor(Math.random() * 3)];:通過隨機選擇生成電腦的選擇。它使用 Math.random() 生成0到1之間的隨機小數,然後將其乘以3,再使用 Math.floor() 將結果向下取整,從而得到0、1或2,然後使用這個值來索引 "choices" 陣列,以隨機選擇電腦的選擇。

  4. let resultText = "";:創建一個空字串 "resultText",它將用於存儲遊戲結果的文本。

  5. if (userChoice === computerChoice) {:檢查玩家的選擇是否等於電腦的選擇,如果是則執行以下代碼。

    • resultText = "平局!";:將 "resultText" 設置為 "平局!",表示遊戲平局。
  6. } else if (...):使用 else if 條件來檢查不同的情況。

    • 這個部分檢查玩家的選擇是否擊敗電腦的選擇,例如,玩家出石頭,電腦出剪刀,玩家勝利。這裡使用了多個 ||(或)運算符來表示三種可能的贏得遊戲的情況。
    • 如果任何一個條件成立,則 resultText 被設置為 "你赢了!"。
  7. } else {:如果以上條件都不成立,表示電腦贏了遊戲。

    • resultText = "電腦赢了!";:將 "resultText" 設置為 "電腦赢了!"。
  8. const resultElement = document.getElementById("result");:獲取具有 "result" ID 的HTML元素,這是用來顯示遊戲結果的元素。

  9. resultElement.innerHTML = 你出了${userChoice},電腦出了${computerChoice},${resultText};:將遊戲結果的文本設置為 "result" 元素的內容。使用模板字符串來插入玩家和電腦的選擇,以及遊戲結果文本。最終,這個結果文本將顯示在網頁上。

目前製作結果:
https://ithelp.ithome.com.tw/upload/images/20231005/201621772W8SQ4M8DH.png

https://ithelp.ithome.com.tw/upload/images/20231005/20162177T9qHuISgNn.png

https://ithelp.ithome.com.tw/upload/images/20231005/20162177YSgivcoGIk.png


上一篇
Day 21 互動小遊戲-猜拳(HTML、CSS)
下一篇
Day 23 簡易表單(HTML、CSS)
系列文
基礎網頁開發30天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言